<div class="card header-background">
  <div class="d-flex justify-content-between mt-5 px-3">
    <div class="media">
        <span class="avatar avatar-xl"
              [style.background-image]="'url('+user.info.headImgUrl+')'"></span>
      <div class="media-body ml-2">
        <h5 class="mt-2">{{user.info.nickname}}</h5>
        <div class="rounded-pill bg-primary px-2">
          <ng-container *ngIf="!user.wallet.alipay else bind">
            <i class="weui-icon-info-circle small"></i><span class="small">未绑定支付宝</span>
          </ng-container>
          <ng-template #bind><i class="fab fa-alipay"></i>
            <span class="small"> {{user.wallet.alipay.substr(0, 3) + '****' + user.wallet.alipay.substr(7)}}</span>
          </ng-template>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column justify-content-center">
      <div class="media-body d-flex flex-column">
        <span class="mt-2 text-center" style="font-size: 1.2567rem">{{user.wallet.balance | number:'1.2-2'}}</span>
        <span class="small text-warning font-weight-bold" data-toggle="tooltip" data-placement="bottom"
              title="Tooltip on bottom">可提现(圆)</span>
      </div>
    </div>
  </div>
  <div class="my-3 px-3">
    <div class="d-flex justify-content-between">
      <div class="d-flex flex-column"><span
        class="font-weight-bold text-center">{{user.shareNumber}}</span><span
        class="text-warning small font-weight-bold">分享人数</span>
      </div>
      <div class="d-flex flex-column"><span
        class="font-weight-bold text-center">{{user.wallet.totalBalance | number:'1.2-2'}}</span><span
        class="text-warning small font-weight-bold">累计收益(圆)</span>
      </div>
      <div class="d-flex flex-column"><span
        class="font-weight-bold text-center">{{user.wallet.brokerage|number:'1.2-2'}}</span><span
        class="text-warning small font-weight-bold">分享收益(圆)</span>
      </div>
    </div>
  </div>
</div>
<div class="weui-panel weui-panel_access">
  <div class="weui-panel__hd"><span class="font-weight-bold text-dark">我的订单</span></div>
  <div class="weui-panel__bd">
    <div class="weui-grids">
      <a routerLink="/orders" [queryParams]="{openId:user.info.openId}" class="weui-grid">
        <div class="weui-grid__icon">
          <i class="fas fa-search-plus fa-2x"></i>
        </div>
        <p class="weui-grid__label">
          <span class="text-primary">订单查询</span>
        </p>
      </a>
      <a routerLink="/sub-order" [queryParams]="{openId:user.info.openId}" class="weui-grid">
        <div class="weui-grid__icon">
          <i class="fas fa-clipboard-list fa-2x"></i>
        </div>
        <p class="weui-grid__label">
          <span class="text-primary">提交订单</span>
        </p>
      </a>
      <a routerLink="/withdraw" [queryParams]="{openId:user.info.openId}" class="weui-grid">
        <div class="weui-grid__icon">
          <i class="fas fa-file-invoice-dollar fa-2x"></i>
        </div>
        <p class="weui-grid__label">
          <span class="text-primary">申请提现</span>
        </p>
      </a>
    </div>
  </div>
</div>
<div class="weui-cells__title">最近订单</div>
<div class="weui-cells">
  <ng-container *ngIf="orderModel?._embedded?.orders else noneOrder">
    <div class="weui-cell" *ngFor="let item of orderModel?._embedded?.orders">
      <div class="weui-cell__bd">
        <div class="weui-form-preview">
          <div class="weui-form-preview__hd">
            <div class="weui-form-preview__item">
              <label class="weui-form-preview__label">预计奖金:</label>
              <em class="weui-form-preview__value">{{item.pubSharePreFee|sharePreFee}}</em>
            </div>
          </div>
          <div class="weui-form-preview__bd">
            <div class="weui-form-preview__item">
              <label class="weui-form-preview__label">订&nbsp;单&nbsp;号:</label>
              <span class="weui-form-preview__value">{{item.tradeId}}</span>
            </div>
            <div class="weui-form-preview__item">
              <label class="weui-form-preview__label">商品名称:</label>
              <span class="weui-form-preview__value">{{item.itemTitle}}</span>
            </div>
            <div class="weui-form-preview__item">
              <label class="weui-form-preview__label">实付金额:</label>
              <span class="weui-form-preview__value">{{item.alipayTotalPrice| currency : 'CNY'}}</span>
            </div>
            <div class="weui-form-preview__item">
              <label class="weui-form-preview__label">交易日期:</label>
              <span class="weui-form-preview__value">{{item.createTime | date:'short'}}</span>
            </div>
            <div class="border-bottom my-1"></div>
            <div class="weui-form-preview__item">
              <label class="weui-form-preview__label">状&nbsp;&nbsp;&nbsp;&nbsp;态:</label>
              <span
                class="weui-form-preview__value "
                [ngClass]="{'text-warning':item.tkStatus>3,'text-success':item.tkStatus==3}">{item.tkStatus,plural,=3 {订单结算} =12{订单付款} =13 {订单失效} =14{订单成功} other {未知}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
</div>
<ng-template #noneOrder>
  <div class="weui-cell weui-cell_access">
    <div class="weui-cell__hd"><i class="weui-icon-info"></i></div>
    <div class="weui-cell__bd">
      暂无订单
    </div>
    <div class="weui-cell__ft">
      <span style="vertical-align:middle; font-size: 17px;">快去购买一单吧!</span>
      <span class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></span>
    </div>
  </div>
</ng-template>
<div class="weui-cells">
  <div class="weui-cell weui-cell_access" (click)="onShowKefu()">
    <div class="weui-cell__hd"><i class="weui-icon-info"></i></div>
    <div class="weui-cell__bd">联系客服</div>
    <div class="weui-cell__ft"></div>
  </div>
</div>
<div class="footer">
  <div class="d-flex justify-content-center">Copyright &copy; 2008-2019 AlexBob</div>
</div>
